<template>
  <div>
    <div class="title">
      <span class="iconfont icon-left gobackIcon" @click="()=>{this.$router.go(-1)}"></span>
      <p>修改电话</p>
    </div>
    <div class="content">
      <div class="centerValue" v-if="userInfo">
        <ul>
          <li>
            <p>商家电话</p>
            <input type="text" disabled v-model="userInfo.mobile" placeholder="显示原电话" />
          </li>
          <li>
            <p>修改电话</p>
            <input type="text" v-model="newMobile" placeholder="请输入修改电话" />
          </li>
          <li>
            <p>确认电话</p>
            <input type="text" v-model="reNewMobile" placeholder="请确认修改电话" />
          </li>
        </ul>
      </div>
      <div class="footBtn">
        <van-button block class="btn" @click="changeMobile()">确认修改</van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    userInfo: null,
    newMobile: null,
    reNewMobile: null
  }),
  created() {
    this.$axios.get(`ym/mall-online-merchant/info`).then(res => {
      if (res.code === 0) {
        this.userInfo = res.data;
      } else {
        console.log("获取商家信息失败");
      }
    });
  },
  methods: {
    changeMobile() {
      if (this.newMobile === this.reNewMobile) {
        let event = {
          mobile: this.newMobile,
          storeName: this.userInfo.storeName,
          description: this.userInfo.description,
          wechat: this.userInfo.wechat,
          alipay: this.userInfo.alipay,
          idcardImgFront: this.userInfo.idcardImgFront,
          idcardImgBack: this.userInfo.idcardImgBack,
          businessLicenseNo: this.userInfo.businessLicenseNo,
          businessLicenseImg: this.userInfo.businessLicenseImg
        };
        this.$axios.post(`ym/mall-online-merchant/enter`, event).then(res => {
          if (res.data.code === 0) {
            this.$Toast("修改成功");
            this.$router.push("/shop");
          } else {
            this.$Toast("修改失败");
          }
        });
      } else {
        this.$Toast("确认电话输入不一致！");
        return false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.title {
  margin: 0;
  padding: 10px 0;
  background: #0cbccb;
  color: #fff;
  .gobackIcon {
    border: 1px solid #0cbccb;
    position: absolute;
    left: 10px;
  }
  p {
    margin: 0;
    padding: 0;
    text-align: center;
  }
}
.content {
  font-size: 14px;
  color: #3c3c3c;
  .centerValue {
    width: 80%;
    margin: 0 auto;
    ul {
      li {
        margin: 20px 0;
        padding: 5px;
        p {
          margin: 5px 0;
        }
        input {
          border: none;
          width: 100%;
          padding: 5px 0;
          border-bottom: 1px solid #0cbccb;
          &::placeholder {
            font-size: 12px;
          }
        }
      }
    }
  }
  .footBtn {
    width: 80%;
    margin: 0 auto;
    .btn {
      background: #0cbccb;
      border-radius: 30px;
      color: #fff;
    }
  }
}
</style>